<template>
  <div class="bg-white rounded-lg p-5 h-full">
    <div class="font-bold text-lg mb-4">医师开药异常检测</div>

    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"

    >
      <el-form-item prop="enterpriseName">
        <el-input
          v-model="queryParams.enterpriseName"
          placeholder="医疗机构名称"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>
      <el-form-item prop="orgType">
        <!-- <el-input
          v-model="queryParams.orgType"
          placeholder="机构类别"
          clearable
          @keyup.enter.native="search"
        /> -->
        <el-select v-model="queryParams.orgType" placeholder="机构类别" clearable>
          <el-option
            v-for="item in dict.type.medical_org_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="physicianName">
        <el-input
          v-model="queryParams.physicianName"
          placeholder="开药医师"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>
      <el-form-item prop="physicianType">
        <el-input
          v-model="queryParams.physicianType"
          placeholder="执业类别"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>
      <el-form-item prop="practicingRange">
        <el-input
          v-model="queryParams.practicingRange"
          placeholder="执业范围"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>
      <el-form-item prop="authInfo">
        <el-input
          v-model="queryParams.authInfo"
          placeholder="处方权限授权"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>
      <el-form-item prop="disposalStatus">
        <el-input
          v-model="queryParams.disposalStatus"
          placeholder="状态"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>
      <el-form-item prop="dateRange">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          :clearable="false"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="mb-4">
      <el-button type="primary" icon="" size="" @click="search">搜索</el-button>
      <el-button icon="" size="" @click="reset">重置</el-button>
<!--      <el-button icon="" size="" @click="reset">导入</el-button>
      <el-button icon="" size="" @click="reset">下载导入模板</el-button>-->
    </div>

    <el-table v-loading="loading" :data="dataList" border>
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column
        label="医疗机构名称"
        align="center"
        prop="enterpriseName"
      />
      <el-table-column label="机构类别" align="center" prop="orgType" >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.medical_org_type"
            :value="scope.row.orgType"
          />
        </template>
      </el-table-column>
      <el-table-column label="开药医师" align="center" prop="physicianName" />
      <el-table-column label="执业类别" align="center" prop="physicianType" />
      <el-table-column label="执业范围" align="center" prop="practicingRange" />
      <el-table-column
        label="开药时间"
        align="center"
        prop="prescriptionTime"
      />
      <el-table-column label="处方权限授权" align="center" prop="authInfo" />
      <el-table-column
        label="异常内容"
        align="center"
        prop="prescriptionContent"
      />
      <el-table-column label="处置状态" align="center" prop="disposalStatus">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.correction_status"
            :value="scope.row.disposalStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="toDetailPage(scope.row)"
            >查看详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="toMaterialPage(scope.row, 0)"
            v-if="scope.row.I === '未处置'"
            >整改意见书下发</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="toMaterialPage(scope.row, 1)"
            v-else
            >查看整改材料</el-button
          >
          <!-- <el-button size="mini" type="text" @click="handleUpdate(scope.row, 2)"
            >已处置</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDataList"
    />
  </div>
</template>

<script>

import { getDoctorPrescribeListAPI } from "@/api/zhangping/health-care/doctor-prescribe";

export default {
  dicts: [
    "enterprise_info_type",
    "health_certificate_status",
    "business_file_status",
    "enterprise_category",
    "correction_status",
    "medical_org_type"
  ],

  data() {
    return {
      // 遮罩层
      loading: true,

      // 总条数
      total: 0,
      // 一企一档表格数据
      dataList: [],


      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseName: null,
        orgType: null,
        physicianName: null,
        physicianType: null,
        practicingRange: null,
        disposalStatus: null,
        authInfo: null,
        params: {
          beginMonitorTime: null,
          endMonitorTime: null,
        },
      },
      dateRange: [],

    };
  },
  created() {
    this.loading = false;
    this.getDataList();
    // this.getCategoryList()
  },
  methods: {
    toMaterialPage(row, status) {
      const obj = {
        path: "/health-care/doctor-prescribe-material",
        query: {
          id: row.id,
          status: row.disposalStatus,
          name:row.enterpriseName,
          code:row.creditCode
        },
      };
      this.$router.push(obj);
    },
    toDetailPage(row) {
      this.$store.commit("SET_DOCTOR", row);
      const obj = {
        path: "/health-care/doctor-prescribe-detail",
        query: {
          id: row.id,
        }
      };
      this.$router.push(obj);
    },

    getDataList() {
      this.loading = true;
      const { dateRange } = this;

      console.log(this.queryParams);
      if(dateRange){
        this.queryParams.params= {
          beginMonitorTime: dateRange[0],
          endMonitorTime : dateRange[1] ,
        }
      }
      getDoctorPrescribeListAPI(this.queryParams)
        .then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.$refs["queryForm"].resetFields();
      // this.resetForm("form");
      this.search();
    },
    /** 搜索按钮操作 */
    search() {
      this.queryParams.pageNum = 1;
      this.getDataList();
    },




  },
};
</script>
